<template>

    <div class="headers">
        <van-row>
            <van-col span="8">
                <div class="content">
                    <img src="../assets/logo.png" alt="" width="35" height="35" class="imgs">
                    <div class="title">
                        <div style="margin-top: 7px; margin-right: 8px;">AI智能汽车平台</div>
                        <div style="font-size:11px; color:#999999">选车买车二手车</div>
                    </div>
                </div>
            </van-col>
            <van-col span="12">
                <van-icon name="search" size="28px" style="color: white; float: right; margin-top: 7px;line-height: 38px;" @click="onIcon"/>
            </van-col>
            <van-col span="4">
                <div class="rightd" @click="onDownApp">
                    <div style="font-size:10px;padding-top: 6px;font-weight: 600;">打开APP</div>
                    <div style="font-size:9px; color:white">五人正在使用</div>
                </div>
            </van-col>
        </van-row>
    </div>
<van-tabs v-model:active="actives">
  <van-tab v-for="(item ,index) in tabdata" :title="item.name" :key="index">
    <component :is="item.component"></component>
  </van-tab>
</van-tabs>
<!--点击图标弹出标签栏内容-->
<van-icon name="wap-nav" size="40px" @click="showPopup" class="icons"/>

<van-popup
  v-model:show="show"
  closeable
  position="bottom"
  :style="{ height: '80%' }"
>

<van-grid :column-num="3" :border="false">
  <van-grid-item v-for="(item,index) in tabdata" :key="item">
    <van-button type="default" @click="onClick(index)">
        {{ item.name }}
    </van-button>
  </van-grid-item>
</van-grid>


</van-popup>


    <van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">首页</van-tabbar-item>
  <van-tabbar-item icon="user-circle-o">车友圈</van-tabbar-item>
  <van-tabbar-item icon="logistics">选车</van-tabbar-item>
  <van-tabbar-item icon="birthday-cake-o">二手车</van-tabbar-item>
  <van-tabbar-item icon="setting-o">服务</van-tabbar-item>
</van-tabbar>

</template>

<script setup>
// ref  是响应式操作 如果页面的数据需要实时变化的时候 需要定义 ref
import { ref} from 'vue'
import Selected from '../components/Selected.vue';
import NewCar from '../components/NewCar.vue';
import Locals from '../components/Locals.vue';
import YuanChuang from '../components/YuanChuang.vue';
import VideoCar from '../components/VideoCar.vue';
import Hangye from '../components/Hangye.vue';
import Daogou from '../components/Daogou.vue';

 const active = ref(0);

 // 定义一个路由
 import { useRouter } from 'vue-router'
 const router = useRouter() // 只负责传递路由 不负责接受路由参数

const onDownApp = ()=>{
    console.log("下载app");
    //跳转到downapp中   push 两种方式 一种是path  一种是name 一个是路径 一个名字
    router.push('/downapp')
    // router.push({name:'downapp'})
}

//点击搜索跳转到搜索页面
const onIcon = ()=>{
    router.push({name: 'searchs'})
}

//点击图标弹出标签栏内容

 const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
const actives = ref(0);

const tabdata=ref([
        {id:1 ,name:'精选',component:Selected},
        {id:2 ,name:'新车',component:NewCar},
        {id:3 ,name:'本地',component:Locals},
        {id:4 ,name:'原创',component:YuanChuang},
        {id:5 ,name:'视频车评',component:VideoCar},
        {id:6 ,name:'行业',component:Hangye},
        {id:7 ,name:'导购',component:Daogou},

    ])
const onClick = (index)=>{
    console.log(index);
    // 当点击按钮的时候跳转到指定的标签栏中
     actives.value = index;
     //关闭当前窗口
     show.value = false;
}
</script>

<style scoped>
.headers{
    background: url(../assets/header-img.png);
   height: 50px
}
.imgs{
    margin-top: 5px; /* 距离上边线的高度 */
    margin-left: 10px; /* 距离左边线的宽度 */
}
.content{
    display: flex;
    /* align-items: center; 垂直居中 */
    justify-content: space-between; /* 水平居中 */
}

.title{
    
    color: white;
    font-size: 12px;

}
.rightd{
    background-color: #fe8f00;
    height: 38px;
    width: 65px;
    margin-top:5px;
    border-radius: 10px;
    margin-left:2px;
    text-align: center;
    cursor: pointer;
}

.icons{
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 10;
    background-color: white;
    cursor: pointer;
}
.van-button{
    width: 118px;
}
</style>